<template>
	<view>
		<div class="container">
		    <image src="/static/0.jpg" class="p0" mode="widthFix"></image>
		    <image src="/static/1.jpg" class="p1" mode="widthFix"></image>
		    <image src="/static/2.jpg" class="p2" mode="widthFix"></image>
		    <image src="/static/3.jpg" class="p3" mode="widthFix"></image>
		    <image src="/static/4.jpg" class="p4" mode="widthFix"></image>
		    <image src="/static/5.jpg" class="p5" mode="widthFix"></image>
		    <image src="/static/6.jpg" class="p6" mode="widthFix"></image>
		    <image src="/static/7.jpg" class="p7" mode="widthFix"></image>
		    <image src="/static/8.jpg" class="p8" mode="widthFix"></image>
		    <image src="/static/9.jpg" class="p9" mode="widthFix"></image>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '图片墙'
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
	body{
	    background-color: #eee;
	}
	image{
	    
	    transition: 1s;
	    position: absolute;
	    
	    padding: 10px 10px 15px 10px;
	    background-color: white;
	    z-index: 1;
	}
	image:hover{
	    transform: rotate(0deg);
	    transform: scale(1.2);
        box-shadow: 10px 10px 15px #aaa;
	    z-index: 2;
	}
	.container{
	    width: 1000px;
	    height: 500px;
	    position: relative;
	    margin: auto;
	}
	.p1{
	    transform: rotate(10deg);
	    left: 10px;
	    top: 50px;
	}
	.p2{
	    transform: rotate(5deg);
	    left: 150px;
	    top: 50px;
	}
	.p3{
	    transform: rotate(-10deg);
	    left: 300px;
	    top: 50px;
	}
	.p4{
	    transform: rotate(20deg);
	    left: 450px;
	    top: 50px;
	}
	.p5{
	    transform: rotate(-15deg);
	    left: 600px;
	    top: 50px;
	}
	.p6{
	    transform: rotate(14deg);
	    left: 10px;
	    top: 350px;
	}
	.p7{
	    transform: rotate(23deg);
	    left: 150px;
	    top: 350px;
	}
	.p8{
	    transform: rotate(10deg);
	    left: 300px;
	    top: 350px;
	}
	.p9{
	    transform: rotate(30deg);
	    left: 450px;
	    top: 350px;
	}
	.p0{
	    transform: rotate(10deg);
	    left: 600px;
	    top: 350px;
	}
</style>
